import React, { useState, useEffect } from "react"
import { getCookie } from "../../utils/cookie"
import instance from "../../utils/instance"
import { connect } from "react-redux"
import "./PutQuestion.css"

function PutQuestion(props) {
    const [content, setContent] = useState("")
    const [userId, setUserId] = useState("")
    const [topic, setTopic] = useState([])
    const [title, setTitle] = useState("")
    const [currentTopic, setCurrentTopic] = useState([])
    useEffect(() => {
        setUserId(props.userInfo._id)
    }, [props.userInfo])
    useEffect(() => {
        instance.get("/topic").then(data => {
            if (data.data.errno === 0) {
                setTopic(data.data.data)
                setCurrentTopic([data.data.data[0]._id])
            }
        })
    }, [])
    const createQuestion = (e) => {
        let token = getCookie("token")
        instance.defaults.headers.common['Authorization'] = "Bearer " + token
        if (content !== "") {
            instance.post("/question/create", {
                title,
                questioner: userId,
                description: content,
                topics: currentTopic
            }).then(data => {
                if (data.data.errno === 0) {
                    alert("问题创建成功，等待有缘人前来回答！")
                    props.closeThis(false)
                    window.location.reload()
                } else {
                    alert("创建失败，请重新尝试!")
                }
            })
        } else {
            alert("请输入您的问题")
        }
    }
    const closeCreateQuestion = (e) => {
        props.closeThis(false)
    }
    return (
        <div className="put_question_container">
            <div className="put_question_content">
                <div className="close_create_question">
                    <span className="iconfont iconguanbi" onClick={(e) => { closeCreateQuestion(e) }}></span>
                </div>
                <div className="put_question_content_top">
                    <div className="put_question_content_top_left">
                        <img src={props.userInfo.avatar_url ? props.userInfo.avatar_url : [require("../../assets/img/default_user.jpg")]} alt="" />
                    </div>
                    <div className="put_question_content_top_right">
                        <input type="text" placeholder="输入问题的标题" required onChange={(e) => setTitle(e.target.value)} />
                        <textarea placeholder="写下您的问题描述，准确的描述问题更能得到解答..." onChange={(e) => { setContent(e.target.value) }} />
                        {topic.length > 0 ? (
                            <select onChange={(e) => { setCurrentTopic([e.target.value]); }}>
                                {topic.map(item => {
                                    return (<option value={item._id} key={item._id}>{item.name}</option>)
                                })}
                            </select>
                        ) : ""}
                    </div>
                </div>
                <div className="put_question_content_btn">
                    <input type="button" value="发布问题" onClick={(e) => { createQuestion(e) }} />
                </div>
            </div>
        </div>

    )
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.home.userInfo
    }
}

export default connect(mapStateToProps, null)(PutQuestion)